<template>
  <div class="selected">
    <div class="operation">
      <el-text class="mx-1" @click.top="del">删除</el-text>
    </div>
  </div>
</template>

<script setup lang='ts'>
const emit = defineEmits(['delItem']);
const del = () => {
  emit("delItem")
}
</script>

<style lang='scss' scoped>
.selected {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 4px);
  height: calc(100% - 5px);
  border: 2px dashed #ccc;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 5;

  .operation {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    .mx-1 {
      color: $white;
      margin-right: 10px;
      margin-top: 10px;
      opacity: 0.9;
      cursor: pointer;

      &:hover {
        opacity: 1;
      }
    }
  }
}

// Your scoped styles here
</style>